<template>
	<div v-if="panelDataArr.length">
		<fui-card @click="goArticle(index)" v-for="(item,index) in panelDataArr" :key="index"
			:margin="['25rpx', '32rpx']">
			<fui-panel :panelData="item"></fui-panel>
		</fui-card>
	</div>
	<fui-empty v-else src="/static/images/empty.png" title="还没有发布文章～"></fui-empty>
	<fui-divider v-if="panelDataArr.length" text="没有更多文章了～"></fui-divider>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		showImage
	} from '../../config/index.js'
	const {
		proxy
	} = getCurrentInstance()
	import {
		getNewFiveArticleApi
	} from '../../api'
	let panelDataArr = ref([])

	onLoad(() => {
		getNewFiveArticleEvent()
	})
	// 获取首页前5篇文章
	const getNewFiveArticleEvent = async () => {
		const {
			data
		} = await getNewFiveArticleApi(proxy)
		if (data?.code == 200) {
			panelDataArr.value = data.data.map(r => {
				return {
					...r,
					src: r.src?.match(/src=["']?([^\s"'<>]+)["']?/)[1] ||
						showImage
				}
			})
		}
	}
	// 跳转文章页
	const goArticle = (index) => {
		console.log(panelDataArr.value[index])
		uni.navigateTo({
			url: `/pages/article/index?articleId=${panelDataArr.value[index].log_ID}`
		});
	}
</script>

<style lang="scss" scoped>
</style>